<template>
    <el-form ref="form" :model="form" label-width="80px">
        <el-row type="flex" :gutter="10">
            <el-col :span="12">
                <el-form-item label="题目名称" prop="name">
                    <el-input v-model="form.name" disabled></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="题目分类" prop="admin_id">
                    <el-select v-model="form.cate_id" placeholder="请选择题目类型" disabled>
                        <el-option v-for="item in timuType" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="题目选项">
                </el-form-item>
            </el-col>
            <el-col :span="24" v-for="(item, index) in form.option" :key="index">
                <el-form-item :label="'选项' + (index + 1)" :prop="'option.' + index + '.option_name'" :rules="{
                                required: true, message: '内容不能为空', trigger: 'blur'
                            }">
                    <div style="display:flex">
                        <el-input v-model="item.option_name" disabled></el-input>
                    </div>
                </el-form-item>
                <el-row v-for="(i,ind) in item.child" :key="ind">
                    <el-col :span="18">
                        <el-form-item label-width="160px" :label="'子选项' + (ind+ 1)" :prop="`option.${index}.child.${ind}.option_name`" :rules="{
                                required: true, message: '内容不能为空', trigger: 'blur'
                            }">
                            <div style="display:flex">
                                <el-input v-model="i.option_name" disabled>
                                </el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否需描述" label-width="100px">
                            <el-switch v-model="i.is_desc" active-color="#13ce66" inactive-color="#ff4949" disabled>
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="13">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="数值越大越靠前，默认数值100" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
export default {
    props: ["form", "timuType"]
}
</script>

<style>
</style>